<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算器</title>
	<style type="text/css">
		*{
			list-style: none;
			outline-style: none;
		}
		ul{
			width: 310px;
			padding: 10px;
			margin: 150px auto;
			background-color: #9CD2EB;
			box-shadow: 0px 3px 3px rgba(0,0,0,0.4);
			border-radius: 3px;
		}
		li{
			padding-top:5px; 
			width: 300px;
			height: 45px;
		}
		.btn{
			width: 65px;
			height: 40px;
			margin-left: 10px;
			background-color: #fff;
			display: block;
			float: left;
			text-align: center;
			line-height: 40px;
			box-shadow: 0px 3px 3px #76A5B9;
			border-radius: 3px;
			cursor: pointer;
		}
		#clr{
			background-color: #FF9FA9;
			color: white;
			box-shadow: 0px 3px 3px #FF7C87;
		}
		#display{
			width: 205px;
			height: 43px;
			margin-left: 10px;
			float: left;
			text-align: right;
			line-height: 43px;
			box-shadow: 0px 3px 3px rgba(0,0,0,0.4) inset;
			border-radius: 3px;
			background-color: #7AA7BB;
			padding: 0px 5px;
		}
		#equal{
			background-color: #F2FF93;
		}
	</style>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//初始化
			var display1='0';//显示的第一个数
			var display2='';//显示的第二个数
			var res='';//结果
			var flag = true;//判断输入的是第一个数or第二个数
			$('.btn').click(function(event) {
				var value = $(this).text();	//取得按钮的值			
				if ($(this).hasClass('num')&&flag) {
					if (display1=="0") {
						display1=value;
					}else{
						display1=display1+value;
					}
					res=display1;
				}else if($(this).hasClass('calcu')&&display1!='0'){
					if(display2!=''){
						display1=parseFloat(display1);
						display2=parseFloat(display2);
						if (display2!=NaN) {
							switch(calcu){
								case "+":display1 = display1 + display2;break;
								case "-":display1 = display1 - display2;break;
								case "×":display1 = display1 * display2;break;
								case "÷":display1 = display1 / display2;break;
							}
						}
						display2="";
					}
					flag = false;
					calcu=value;
					res=res+value;
				}else if ($(this).hasClass('num')&& !flag){
					display2=display2+value;
					res=res+value;
				}else if($(this).hasClass('equal')){
					display1=parseFloat(display1);
					display2=parseFloat(display2);
					if (display2!=NaN) {
						switch(calcu){
							case "+":res = display1 + display2;break;
							case "-":res = display1 - display2;break;
							case "×":res = display1 * display2;break;
							case "÷":res = display1 / display2;break;
						}
						display1=res;
						display2='';
					};
				}else if ($(this).hasClass('dot')) {
					if (flag) {
						display1=display1+value;
						res=display1;
					}else{
						display2=display2+value;
						res=display2;
					}
				}else if($(this).hasClass('clr')){
					//reset
					display1=0;
					display2="";
					res = '';
					flag=true;
				}
				if(res==""){$('#display').text(0);}else{$('#display').text(res);};
				
			});


			
		})
	</script>
</head>

<body>
	<div class="mid">
		<ul>
			<li>
				<span id="clr" class="btn clr">C</span>
				<span id="display">0</span>
			</li>
			<li>
				<span id="num7" class="btn num">7</span>
				<span id="num8" class="btn num">8</span>
				<span id="num9" class="btn num">9</span>
				<span id="plus" class="btn calcu">+</span>
			</li>
			<li>
				<span id="num4" class="btn num">4</span>
				<span id="num5" class="btn num">5</span>
				<span id="num6" class="btn num">6</span>
				<span id="minus" class="btn calcu">-</span>
			</li>
			<li>
				<span id="num1" class="btn num">1</span>
				<span id="num2" class="btn num">2</span>
				<span id="num3" class="btn num">3</span>
				<span id="divided" class="btn calcu">÷</span>
			</li>
			<li>
				<span id="num0" class="btn num">0</span>
				<span id="dot" class="btn dot">.</span>
				<span id="equal" class="btn equal">=</span>
				<span id="multiplied" class="btn calcu">×</span>
			</li>
		</ul>
	</div>
</body>
</html>